<div class="breadcrumb-area breadcrumb-bg pt-85 pb-85 mb-80">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="breadcrumb-container">
                    <ul>
                        <li><a href="/">Home</a> <span class="separator">/</span></li>
                        <li class="active">Single Product</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="single-product-page-content mb-80">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 mb-md-50 mb-sm-50">
                <!-- single product tabstyle one image gallery -->
                <div class="product-image-slider pts1-product-image-slider pts-product-image-slider pts1-product-image-slider flex-row-reverse">
                    <!--product large image start -->
                    <div class="tab-content product-large-image-list pts-product-large-image-list pts1-product-large-image-list" id="myTabContent">
                        {volist name="$info['imgs']" id='vo' key="i"}
                        <div class="tab-pane fade show{if $i == 1} active{/if}" id="single-slide-{$i}" role="tabpanel" aria-labelledby="single-slide-tab-{$i}">
                            <!--Single Product Image Start-->
                            <div class="single-product-img img-full">
                                <img src="{$vo}" class="img-fluid" alt="">
                                <a href="{$vo}" class="big-image-popup"><i class="fa fa-search-plus"></i></a>
                            </div>
                            <!--Single Product Image End-->
                        </div>
                        {/volist}
                    </div>
                    <!--product large image End-->

                    <!--product small image slider Start-->
                    <div class="product-small-image-list pts-product-small-image-list pts1-product-small-image-list">
                        <div class="nav small-image-slider pts-small-image-slider pts1-small-image-slider" role="tablist">
                            {volist name="$info['imgs']" id='vo' key="i"}
                            <div class="single-small-image img-full">
                                <a data-toggle="tab" id="single-slide-tab-{$i}" href="#single-slide-{$i}">
                                    <img src="{$vo}" class="img-fluid" alt=""></a>
                            </div>
                            {/volist}
                        </div>
                    </div>
                    <!--product small image slider End-->
                </div>
                <!-- end of single product tabstyle one image gallery -->
            </div>
            <div class="col-lg-6">
                <!--=======  single product details  =======-->

                <div class="single-product-details-container">

                    <p class="product-title mb-15">{$info.title}</p>
<!--                    <p class="reference-text mb-15">Reference: demo_13</p>-->

                    <!--<p class="product-price mb-30">
                        <span class="main-price discounted">${$info.cost}</span>
                        <span class="discounted-price">${$info.price}</span>
                    </p>-->
                    <p class="product-description mb-15">
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum nemo at a amet eaque adipisci, repellat aspernatur tempora corrupti cupiditate?
                    </p>
                    <div class="cart-buttons mb-30">
                        <p class="mb-15">Quantity</p>
                        <div class="pro-qty mr-10">
                            <input type="text" value="1" id="x_show" readonly>
                        </div>
                        <a href="javascript:;" class="pataku-btn x_car"><i class="fa fa-shopping-cart"></i> Add to Cart</a>
                    </div>
                    <div class="policy-list">
                        <ul>
                            <li> <img src="__HOME__images/icons/shield.png" alt=""> Security policy (edit with Customer reassurance module)</li>
                            <li> <img src="__HOME__images/icons/truck.png" alt=""> Delivery policy (edit with Customer reassurance module)</li>
                            <li> <img src="__HOME__images/icons/compare.png" alt=""> Return policy (edit with Customer reassurance module)</li>
                        </ul>
                    </div>
                </div>

                <!--=======  End of single product details  =======-->
            </div>
        </div>
    </div>
</div>
<div class="single-product-tab-section mb-80">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                {$info.content|raw}
            </div>
        </div>
    </div>
</div>
<div class="related-product-area mb-80">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 mb-40">
                <div class="section-title">
                    <h2 class="mb-0">Related <span>Products</span></h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="ptk-slider related-product-slider-container">
                    {volist name='list' id='vo'}
                    <div class="col">
                        <div class="ptk-product">
                            <div class="image">
                                <a href="{:url('home/product/show')}?id={$vo.id}">
                                    <img src="{$vo.img}" class="img-fluid" alt="">
                                </a>
                                <!--=======  hover icons  =======-->
                                <a class="hover-icon" href="#"><i class="lnr lnr-heart"></i></a>
                                <a class="hover-icon" href="javacript:;" onclick="addToCart({$vo.id},1)"><i class="lnr lnr-cart"></i></a>
                                <div class="product-badge">
                                    <span class="new-badge">NEW</span>
                                </div>
                            </div>
                            <div class="content">
                                <p class="product-title">
                                    <a href="{:url('home/product/show')}?id={$vo.id}">{$vo.title}</a>
                                </p>

                                <!--<p class="product-price">
                                    <span class="main-price discounted">${$vo.cost}</span>
                                    <span class="discounted-price">${$vo.price}</span>
                                </p> -->

                            </div>
                        </div>
                    </div>
                    {/volist}
                </div>
            </div>
        </div>
    </div>
</div>


<script>
    $('.x_car').click(function (){
        var num = $("#x_show").val();
        if(num < 1){
            return;
        }
        addToCart({$info.id},num);
    })
</script>
<!--=====  End of related product slider  ======-->